<template>
    <div id="usermsg" style="margin: 20px;">
        <el-form :model="Userform" label-width="auto" style="max-width: 300px">
            <el-form-item label="用户名称：">
                <el-input v-model="Userform.nickname" />
            </el-form-item>
            <el-form-item label="联系方式：">
                <el-input v-model="Userform.tel" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="upMyUserRole()" icon="Select">保存操作</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElMessageBox } from "element-plus";
import $sys from "../../api/sys";
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
const Userform = ref({});
onMounted(() => {
    getMessage();
})

function upMyUserRole(){
    ElMessageBox.confirm(
      '是否确定 ？',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(()=>{
        $sys.UpdUsermsg(Userform.value).then(res=>{
            if(res.code==200){
                ElMessage({
                    message: '修改成功',
                    type:'success'
                })
                getMessage();
            }
        })
    }).catch(()=>{

    })
}
function getMessage() {
    $sys.getUsermsg().then(res => {
        if (res.code == 200) {
            Userform.value = res.data;
        }
    })
}
</script>

<style scoped>
:deep(*){
    font-size: 16px;
}
#changePWD {
  padding: 10px;
}
:deep(.el-form-item__label) {
    color: white !important;
}
.changemain {
  margin-top: 20px;
  padding: 20px;
}
:deep(.el-input__wrapper),
:deep(.el-textarea__inner),
:deep(.el-select__wrapper){
  background-color: #34475b !important;
  border: 1px solid #2b3b4b !important;
  box-shadow: none !important;
  
}
:deep(.el-input__inner),
:deep(.el-textarea__inner),
:deep(.el-select__placeholder){
  color: #ccc!important;
}
</style>

<style lang='less'>
.el-message-box{
  background-color: #2f4052 !important;
}
.el-message-box__message,
.el-message-box__title{
  color: #fff;

}</style>

<style lang='less'></style>